<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('BOM编号')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-bom_no" class="form-control" name="row[bom_no]" type="text" value="{$row.bom_no|htmlentities}" readonly>
        </div>
    </div>
    
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('产品型号')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-product_model_id" data-rule="required" class="form-control selectpicker" name="row[product_model_id]" data-live-search="true">
                <option value="">{:__('请选择产品型号')}</option>
                {foreach $modelList as $model}
                <option value="{$model.id}" {in name="model.id" value="$row.product_model_id"}selected{/in}>{$model.product.name} - {$model.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('状态')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-status" class="form-control selectpicker" name="row[status]">
                <option value="1" {in name="row.status" value="1"}selected{/in}>启用</option>
                <option value="0" {in name="row.status" value="0"}selected{/in}>停用</option>
            </select>
        </div>
    </div>
    
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('备注')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-remark" class="form-control" name="row[remark]" rows="3">{$row.remark|htmlentities}</textarea>
        </div>
    </div>
    
    <!-- BOM明细 -->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('BOM明细')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div id="bom-details">
                {foreach $bomDetails as $index => $detail}
                <div class="bom-detail-item" data-index="{$index}">
                    <div class="row">
                        <div class="col-md-4">
                            <select class="form-control material-select" name="details[{$index}][material_id]" data-rule="required">
                                <option value="">{:__('选择物料')}</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <input type="number" class="form-control" name="details[{$index}][quantity]" placeholder="用量" data-rule="required" min="0" step="0.01" value="{$detail.quantity}">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" name="details[{$index}][position]" placeholder="位置" value="{$detail.position|htmlentities}">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="details[{$index}][remark]" placeholder="备注" value="{$detail.remark|htmlentities}">
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-danger btn-sm remove-detail"><i class="fa fa-trash"></i></button>
                        </div>
                    </div>
                </div>
                {/foreach}
            </div>
            <button type="button" class="btn btn-success btn-sm" id="add-detail"><i class="fa fa-plus"></i> {:__('添加明细')}</button>
        </div>
    </div>
    
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<script>
$(function() {
    var detailIndex = {$bomDetails|count};
    
    // 添加明细
    $('#add-detail').click(function() {
        var html = '<div class="bom-detail-item" data-index="' + detailIndex + '">' +
            '<div class="row">' +
            '<div class="col-md-4">' +
            '<select class="form-control material-select" name="details[' + detailIndex + '][material_id]" data-rule="required">' +
            '<option value="">{:__("选择物料")}</option>' +
            '</select>' +
            '</div>' +
            '<div class="col-md-2">' +
            '<input type="number" class="form-control" name="details[' + detailIndex + '][quantity]" placeholder="用量" data-rule="required" min="0" step="0.01">' +
            '</div>' +
            '<div class="col-md-3">' +
            '<input type="text" class="form-control" name="details[' + detailIndex + '][position]" placeholder="位置">' +
            '</div>' +
            '<div class="col-md-2">' +
            '<input type="text" class="form-control" name="details[' + detailIndex + '][remark]" placeholder="备注">' +
            '</div>' +
            '<div class="col-md-1">' +
            '<button type="button" class="btn btn-danger btn-sm remove-detail"><i class="fa fa-trash"></i></button>' +
            '</div>' +
            '</div>' +
            '</div>';
        
        $('#bom-details').append(html);
        detailIndex++;
        
        // 重新初始化selectpicker
        $('#bom-details .material-select').selectpicker('refresh');
    });
    
    // 删除明细
    $(document).on('click', '.remove-detail', function() {
        $(this).closest('.bom-detail-item').remove();
    });
    
    // 加载物料列表
    function loadMaterials() {
        $.get('manufacture/material/getMaterialList', function(data) {
            var options = '<option value="">{:__("选择物料")}</option>';
            $.each(data, function(index, item) {
                options += '<option value="' + item.id + '">' + item.material_name + ' (' + item.material_code + ')</option>';
            });
            $('.material-select').html(options).selectpicker('refresh');
            
            // 设置已选中的物料
            {foreach $bomDetails as $index => $detail}
            $('select[name="details[{$index}][material_id]"]').val('{$detail.material_id}');
            {/foreach}
            $('.material-select').selectpicker('refresh');
        });
    }
    
    loadMaterials();
});
</script>
